<template>
  <div class="scene" ref="sceneRef"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
import AlarmSprite from '@/three/mesh/AlarmSprite'
import LightWall from '@/three/mesh/LightWall'
import FlyLineShader from '@/three/mesh/FlyLineShader'
import LightRadar from '@/three/mesh/LightRadar'
import * as THREE from 'three'
// 导入资源
import scene from '@/three/scene'
import camera from '@/three/camera'
import renderer from '@/three/renderer'
import controls from '@/three/controls'
import axesHelper from '@/three/axesHelper'
import animate from '@/three/animate'
// import gui from '@/three/gui'
import '@/three/init'

// 创建物体
import createMesh from '@/three/createMesh'

import eventBus from '@/utils/eventBus'

import gsap from 'gsap'

const props = defineProps({
  eventList: Array,
})

const sceneRef = ref(null)
scene.add(camera)
scene.add(axesHelper)

createMesh()

const eventListMesh = []

function createWarning(type, position, index) {
  if (type === '火警') {
    const lightWall = new LightWall(1, 2, position)
    lightWall.eventListIndex = index
    scene.add(lightWall.mesh)
    eventListMesh.push(lightWall)
  }
  if (type === '电力') {
    const color = new THREE.Color(Math.random(), Math.random(), Math.random()).getHex()
    const flyline = new FlyLineShader(position, color)
    flyline.eventListIndex = index
    scene.add(flyline.mesh)
    eventListMesh.push(flyline)
  }
  if (type === '治安') {
    const color = new THREE.Color(Math.random(), Math.random(), Math.random()).getHex()
    const lightRadar = new LightRadar(2, position, color)
    lightRadar.eventListIndex = index
    scene.add(lightRadar.mesh)
    eventListMesh.push(lightRadar)
  }
}

watch(
  () => props.eventList,
  val => {
    eventListMesh.forEach(item => {
      item.remove()
    })

    val.forEach((item, index) => {
      const position = {
        x: item.position.x / 5 - 10,
        z: item.position.y / 5 - 10,
      }
      // 增加警告标识
      const alarmSprite = new AlarmSprite(item.name, position)
      alarmSprite.onClick(() => {
        eventBus.emit('spriteClick', { event: item, index })
      })
      alarmSprite.eventListIndex = index
      scene.add(alarmSprite.mesh)
      eventListMesh.push(alarmSprite)

      createWarning(item.name, position, index)
    })
  },
  { immediate: true },
)

// ui点击事件
eventBus.on('toggleEvent', i => {
  eventListMesh.forEach(item => {
    item.mesh.visible = item.eventListIndex === i

    // camera.lookAt(item.mesh.position)
  })
  const pos = props.eventList[i].position
  gsap.to(controls.target, {
    x: pos.x / 5 - 10,
    y: 0,
    z: pos.y / 2 - 10,
    duration: 1,
  })
  // controls.target.set(pos.x / 5 - 10, 0, pos.y / 2 - 10)
})

onMounted(() => {
  // 载入场景
  sceneRef.value.appendChild(renderer.domElement)
  animate()
})

onBeforeUnmount(() => {
  // gui?.destroy()
  const el = sceneRef.value
  el.removeChild(el.children[0])
})
</script>

<style lang="stylus" scoped>
.scene{
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
